<template>
  <view class="content">

    <view v-if="UPC.forever" class="ume-forever">
      <umeForever />
    </view>
    
    <view class="blocks">
      <view class="block-box" v-for="block in blocks" :key="block.id">
        <view class="block-name">{{ block.name }}</view>
        <view class="block-items">
          <view class="item" v-for="item in block.funcs" :key="item.id" @click="toPage(item)">
            <view class="icon">
              <image :src="item.icon" mode="aspectFit" />
            </view>
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout">
      <view class="btn" @click="toLogout">
        安全退出
      </view>
    </view>
  </view>
</template>

<script setup>
  import { TOKEN_KEY } from '@/configs/index.js';
  import { ref, reactive, onMounted, onUnmounted } from 'vue';
  import { callCloudFunction } from '@/utils/cloudfunc';
  import { setStorageSync } from '@/utils/store';
  import umeForever from '@/components/umeForever.vue';
  
  import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue'
  import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'
  import TnCountTo from '@/uni_modules/tuniaoui-vue3/components/count-to/src/count-to.vue'
  
  const UPC = ref({})
  
  const blocks = ref([
    {
      id: 1,
      name: '账本服务',
      funcs: [
        { id: '1-1', name: '分类管理', icon: '/static/icons/catemag.png', page: '/pages/account/category/index'},
        { id: '1-2', name: '账务统计', icon: '/static/icons/statistics.png', page: '/pages/account/statistics/index'},
      ]
    },
  ])
  
  defineExpose({
    userInfo: () => {
      getUserInfo()
    }
  })
  
  onMounted(() => {
    console.log('组件挂载onMounted');
    // 查询用户信息
    getUserInfo()
    // uni.navigateTo({
    //   url: '/pages/user/login',
    // })
  })
  
  onUnmounted(() => {
    // console.log('组件卸载');
  }) 
  
  // const showBillYearPicker = () => {
  //   billYearPickerShow.value = true
  // }
  
  // const closeBillYearPicker = () => {
  //   billYearPickerShow.value = false
  // }
  
  // const confirmBillYearPicker = (value) => {
  //   // console.log(value);
  //   statUserAccount()
    
  // }
  const toPage = async (p) => {
    // console.log(p.page);
    if (!p.page) {
      uni.showModal({
        title: '提示',
        content: '程序员正在加班熬夜开发...'
      })
      return
    }
    // 是否登录，未登录就跳转登录页
    uni.navigateTo({
      url: p.page
    })
  }

  
  // 获取用户信息
  const getUserInfo = () => {
    uni.showLoading({
      title: '加载中'
    })
    callCloudFunction({
      name: 'ume-user',
      data: {action: 'tokenInfo'}
    }).then(res => {
      uni.hideLoading()
      UPC.value = res.info? res.info.page_configs : {}
    })
  }
  
  const toLogin = () => {
    uni.navigateTo({
      url: '/pages/user/login',
    })
  }
  
  const toLogout = () => {
    uni.showModal({
      title: '退出',
      content: '确定退出吗?',
      success: (p) => {
        if (p.confirm) {
          userLogoutAction()
        }
      }
    })
  }
  
  const userLogoutAction = () => {
    setStorageSync(TOKEN_KEY, null)
    uni.redirectTo({
      url: '/pages/index/index'
    })
  }
</script>

<style lang="scss" scoped>
.content {
  .ume-forever {
    background-color: #efefef;
    padding: 10rpx;
    padding-bottom: 0;
  }
  .node-title {
    margin: 20rpx 0;
    display: flex;
    align-items: center;
    .right {
      margin-left: auto;
    }
  }
  .logout {
    margin-top: 50rpx;
    display: flex;
    justify-content: center;
    bottom: 0;
    .btn {
      color: #888;
    }
  }
  .blocks {
    background-color: #efefef;
    padding: 10rpx;
    .block-box {
      // width: 100%;
      // margin-bottom: 10rpx;
      background-color: #fff;
      padding: 10rpx;
      border-radius: 10rpx;
      .block-name {
        font-size: 28rpx;
        color: #888;
      }
      .block-items {
        display: flex;
        .item {
          width: 140rpx;
          height: 140rpx;
          // border: 1px solid #eee;
          padding: 10rpx;
          text-align: center;
          .icon {
            width: 100%rpx;
            height: 90rpx;
            image {
              width: 90rpx;
              height: 90rpx;
            }
          }
          .name {
            font-size: 28rpx;
            line-height: 28rpx;
          }
        }
      }
    }
  }
}
</style>